<!DOCTYPE html>
<html lang="zh">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>视觉素材</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
	<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="./jquery.mousewheel.min.js"></script>
</head>
<body>
<script>
	$(function(){
        //https://gitee.com/api/v5/repos/xuqingkai/static/contents/img
		var url='https://gitee.com/api/v5/repos/'+window.location.host.substr(0, window.location.host.indexOf('.'))+window.location.pathname+'contents/'+window.location.search.replace('?','');
		$.get(url,function(list){
			var parents='';
			for(var i in list){
	  			if(list[i].type=='dir'){
					if(parents==''){
						var path=list[i].path.split('/');
		  				for(var j=0; j<path.length; j++){
		  					parents+='/'+path[j];
							$('#dir').append(' / <a href="?'+parents.substr(1)+'">'+path[j]+'</a>');
		  				}
					}else{
						$('#dir').append(' | <a href="?'+list[i].path+'">'+list[i].name+'</a>');
					}
					
	  			}else{
	  				var ext=list[i].name.substr(list[i].name.lastIndexOf('.') + 1);
	  				if(ext=='jpg' || ext=='png' || ext=='gif' || ext=='webp' || ext=='svg' || ext=='ico'){
		    				$('#file').append('<div><a href="'+list[i].path+'" data-type="image" data-caption="'+list[i].name+'"><img src="'+list[i].path+'" alt=""/></a></div>');
		  			}else if(ext=='mp4' || ext=='webm'){
		  				$('#file').append('<div><a href="'+list[i].path+'" data-type="video" data-caption="'+list[i].name+'"><img src="'+list[i].path+'" alt=""/></a></div>');
		  			}
				}
			
			}
			var lightbox = UIkit.lightbox('#file');
			$('body').on('mousewheel', '.uk-lightbox', function(event) {
				console.log(event.deltaX, event.deltaY, event.deltaFactor);
				lightbox.show(event.deltaY > 0 ? 'previous' : 'next');
			});
		});
	});

    
</script>
<div id="dir"><a href="?">首页</a></div>
<div id="file" class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-5@l" uk-grid="parallax: 200"></div>
<div id="scroll-to-top" uk-scroll></div>
</body>
</html>